<html>

<head>
    <title>通知服务</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <style>
        .box2 {
            border: 2px solid #cccccc;
            border-top-color: #07c160;
            border-radius: 50%;
            width: 1.4em;
            height: 1.4em;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .weui-btn {
            position: relative;
            display: block;
            width: 75%;
            margin-left: auto;
            margin-right: auto;
            padding: 12px 24px;
            box-sizing: border-box;
            font-weight: 700;
            font-size: 17px;
            text-align: center;
            text-decoration: none;
            color: #06ae56;
            line-height: 1.41176471;
            overflow: hidden;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            background-color: #f2f2f2;
            border: 0 !important;
            border-radius: 24px;
        }
        .weui-btn:active{
            background-color: #e0e0e0;
        }
    </style>
</head>

<body>
    <section id="loading" style="margin-top: 25%;">
        <div style="display: flex;align-items: center;justify-content: center;width:100%;">
            <div class="box2"></div>
        </div>
    </section>
    <section id="subscribe" style="margin-top: 0;display: none;padding:8px;">
        <section style="color:#050505;letter-spacing:1px;line-height:24px;text-align:left;">
            <p style="font-size:16px;padding:0px;margin:0px;">
                关注公众号(如已关注请返回小程序)，即可获取消息通知服务，在xxxx时，通知将以模板消息的形式发送到公众号内，以便提醒你前去查看或处理。
            </p>
        </section>
        <section style="color:#050505;letter-spacing:1px;line-height:24px;text-align:center;margin-top: 20px;">
            <p style="font-size:16px;padding:0px;margin:0px;">
                <strong>扫码或长按识别</strong>
            </p>
        </section>
        <section style="width:130px;margin:0 auto;">
            <img src="./公众号二维码.jpg" style="width: 100%;vertical-align: middle;" />
        </section>
    </section>

    <section>
        <div style="text-align: center;position: absolute;bottom: 70px;left: 0;width: 100%;">
            <button class="weui-btn" onclick="goBack()" hover-class="">返回小程序</button>
        </div>
    </section>

    <!-- 公众号 JSSDK 不要使用cdn资源，放自己的网站下面 -->
    <script src="./js/jweixin-1.6.0.js"></script>
    <!-- 云开发 Web SDK 不要使用cdn资源，放自己的网站下面 -->
    <script src="./js/cloud-1.4.0.js"></script>
    <script>
        // 云开发“静态网站-配置”中会分配的一个默认域名，必须使用https哈，填入公众号网页授权域名和小程序业务域名中
        // webview授权、云函数获取公众号openid成功的前提是：共享云开发环境，公众号、小程序同一主体，绑定在同一开放平台下，且公众号后台关联小程序

        const WX_RESOURCE_APPID = '小程序appid'; // replace
        const WX_RESOURCE_ENVID = '云开发环境id'; // replace
        const WX_OFFICIAL_ACCOUNT_APPID = '公众号appid'; // replace
        const WX_AUTH_TYPE = 'snsapi_base'
        const WX_REDIRECT_URI = location.href;

        var urlSearch = new URLSearchParams(location.search);
        var accessToken = urlSearch.get('access_token');
        var refreshToken = urlSearch.get('refresh_token');
        var cloudInstance;

        if (accessToken) {
            initInstanceAndBindGzh();
            document.getElementById("loading").style.display = "none";
            document.getElementById("subscribe").style.display = "block";
        } else {
            startLogin();
        }

        function goBack() {
                wx.miniProgram.navigateBack();
        }

        function startLogin() {
            try {
                if (!WX_RESOURCE_APPID || !WX_RESOURCE_ENVID) {
                    return;
                }
                cloud.startLogin({
                    provider: 'OfficialAccount',
                    appid: WX_OFFICIAL_ACCOUNT_APPID,
                    scope: WX_AUTH_TYPE,
                    redirectUri: WX_REDIRECT_URI,
                })
            } catch (e) {
                console.error(`startLogin fail: ${e}`)
            }
        }


        async function initInstanceAndBindGzh() {
            try {
                const checkLoginOptions = {
                    provider: 'OfficialAccount',
                    appid: WX_OFFICIAL_ACCOUNT_APPID,
                }
                if (urlSearch.get('oauthredirect') === '1') {
                    checkLoginOptions.accessToken = accessToken
                    checkLoginOptions.refreshToken = refreshToken
                }
                const result = await cloud.checkLogin(checkLoginOptions)
                if (result.errCode === 0 && result.loggedIn) {
                    cloudInstance = new cloud.Cloud({
                        appid: WX_OFFICIAL_ACCOUNT_APPID,
                        resourceAppid: WX_RESOURCE_APPID,
                        resourceEnv: WX_RESOURCE_ENVID,
                    })
                    await cloudInstance.init()
                    await cloudInstance.callFunction({
                        name: 'gzh - 云函数C' // replace
                    })
                } else {
                    console.error(`checkLogin res is: ${result.loggedIn}`)
                }
            } catch (e) {
                console.error(e)
            }
        }
    </script>
</body>

</html>